<html>
<head>
    <meta charset="UTF-8">
    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/components.css" rel="stylesheet" type="text/css"/>
    <link href="static/css/login.css" rel="stylesheet" type="text/css"/>
    <script src="static/js/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
    <body class="login">
        <div class="content">
            <h3 class="form-title">创建商品</h3>
            <div class="form-group">
                <label class="control-label">商品名</label>
                <div>
                    <input class="form-control" type="text" placeholder="商品名" name="title" id="title"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">描述</label>
                <div>
                    <input class="form-control" type="text" placeholder="描述" name="description" id="description"/>
                </div>
            </div><div class="form-group">
                <label class="control-label">价格</label>
                <div>
                    <input class="form-control" type="text" placeholder="价格" name="price" id="price"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">图片</label>
                <div>
                    <input class="form-control" type="text" placeholder="图片" name="imgUrl" id="imgUrl"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">库存</label>
                <div>
                    <input class="form-control" type="text" placeholder="库存" name="stock" id="stock"/>
                </div>
            </div>
            <div class="form-actions">
                <button class="btn blue-steel" id="create" type="submit">
                    提交创建
                </button>
            </div>
        </div>
    </body>
    <script>
        jQuery(document).ready(function () {
            $("#create").on("click", function () {
                //为什么后端做了校验, 前端还要做呢? 因为校验要在最贴近用户感知的地方, 而不用从后端绕一圈, 感知更强体验更好
                var title = $("#title").val();
                var description = $("#description").val();
                var price = $("#price").val();
                var imgUrl = $("#imgUrl").val();
                var stock = $("#stock").val();
                if (title == null || title === "") {
                    alert("商品名不能为空");
                    return false;
                }
                if (description == null || description === "") {
                    alert("描述不能为空");
                    return false;
                }
                if (price == null || price === "") {
                    alert("价格不能为空");
                    return false;
                }
                if (imgUrl == null || imgUrl === "") {
                    alert("图片不能为空");
                    return false;
                }
                if (stock == null || stock === "") {
                    alert("库存不能为空");
                    return false;
                }
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded",
                    url: "http://localhost:8090/item/create",
                    data: {
                        "title": title,
                        "description": description,
                        "price": price,
                        "imgUrl": imgUrl,
                        "stock": stock,
                    },
                    //xhrFields 允许ajax跨域请求 授信, 与后端 ALLOW_CREDENTIALS, 遥相呼应
                    xhrFields:{withCredentials:true},
                    success: function (data) {
                        if (data.status === "Success") {
                            alert("创建成功");
                        } else {
                            alert("创建未成功, 原因为" + data.data.errMsg);
                        }
                    },
                    error: function (data) {
                        alert("创建失败, 原因为" + data.responseText);
                    }
                });
                return false;
            })
        });
    </script>
</html>
